<template>
    <div class="modifyAddress">
       <v-header title="修改地址" ref="header" @back="handleNativeBack" :handleClick='true'>
           <div slot="right" class="headerRight" style="top: 2px; right: 5px;" @click="handleSaveInfo">
              <span>保存</span>
           </div>
       </v-header>
       <div class="inputWrapper">
            <x-input placeholder="请输入收货人姓名" v-model="receptAddtess.receiptName">
                <p slot="label" style="margin-right:20px">
                    <font color="red">*</font>收货人</p>
            </x-input>
            <x-input :max="11" is-type="china-mobile" placeholder="请输入手机号码" v-model="receptAddtess.receiptPhone">
                <p slot="label" style="margin-right:20px">
                    <font color="red">*</font>手机号码</p>
            </x-input>
            <cell is-link title="所属地区" class="require" @click.native="choseAdd()" value-align="left">
                <p style="margin-left: 20px">
                    {{receptAddtess.receiptProvince}} {{receptAddtess.receiptCity}} {{receptAddtess.receiptArea}}
                </p>
            </cell>

            <!-- 省市区三级联动 -->
            <section class="myAddress">
                <!-- 居住地址三级联动选项 -->
                <section class="showChose" v-show="showChose">
                    <section class="address">
                        <section class="titleTop">
                            <div class="titleTopLeft">
                                <span>选择地址</span>
                            </div>
                            <div class="titleTopRight">
                                <span @click="closeAdd()">×</span>
                            </div>
                        </section>
                        <hr style="height:1px;border:none;border-top:1px solid #EEEEEE;" >
                        <section class="title">
                            <div class="area" @click="provinceSelected()">
                                <span>{{Province?Province:info[province-1].name}}</span>
                            </div>
                            <div class="area" @click="citySelected()" :class="City?'':'active'">
                                {{City?City:'请选择'}}
                            </div>
                            <div class="area" @click="districtSelected()" :class="District?'':'active'" v-show="City">
                                {{District?District:'请选择'}}
                            </div>
                        </section>
                        <hr style="height:1px;border:none;border-top:1px solid #EEEEEE;" >
                        <ul>
                            <li class="addList" v-for="(v,k) in info" :key="(v,k).index"
                                @click="getProvinceId(v.id, v.name, k)" 
                                v-show="showProvince" 
                                :class="v.selected === true ? 'active' : ''">{{v.name}}</li>
                            <li class="addList" v-for="(v,k) in showCityList" :key="(v,k).index"
                                @click="getCityId(v.id, v.name, k)" 
                                v-show="showCity" 
                                :class="v.selected ? 'active' : ''">{{v.name}}</li>
                            <li class="addList" v-for="(v,k) in showDistrictList" :key="(v,k).index"
                                @click="getDistrictId(v.id, v.name, k)" 
                                v-show="showDistrict" 
                                :class="v.selected ? 'active' : ''">{{v.name}}</li>
                        </ul>
                    </section>
                </section>
            </section>

             <x-textarea placeholder="街道、楼牌号等" :show-counter="false" :rows="1" autosize v-model="receptAddtess.detailAddress">
                 <p slot="label" style="margin-right:20px">
                    <font color="red">*</font>详细地址</p>
             </x-textarea>
       </div>
    </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import { XInput, Group, Cell, XTextarea } from 'vux'
import info from '@/assets/json/address.json'
import { localUser } from '@/assets/js/local'
import { handleBackMixin } from '@/assets/js/mixin'
import axios from '@/api/axiosApi'
export default {
  mixins: [handleBackMixin],
  data () {
    return {
      pageTitle: '居住地址',
      address: '',
      showChose: false,
      showProvince: true,
      showCity: false,
      showDistrict: false,
      showCityList: false,
      showDistrictList: false,
      province: 1,
      city: 3,
      district: 57,
      GetProvinceId: 2,
      District: false,
      Province: false,
      City: false,
      // v-for循环判断是否为当前
      selected: false,
      info,
      editInfo: [],
      receptAddtess: {
        id: '',
        userId: '',
        receiptName: '',
        receiptPhone: '',
        detailAddress: '',
        defaultAddress: 0,
        receiptProvince: '',
        receiptCity: '',
        receiptArea: ''
      },
      receptAddtessCopy: {},
      allPopupModels: []
    }
  },
  created () {
    this.handleGetEditInfo()
  },
  mounted () {
  },
  methods: {
    // 获取编辑数据信息
    handleGetEditInfo () {
      axios.get(this, '/v1/receiptAddress', {id: this.$route.params.addressId}, (data) => {
        this.editInfo = data
        data.forEach(item => {
          this.receptAddtess = item
          this.receptAddtessCopy = Object.assign({}, item)
        })
      })
    },
    handleSaveInfo () {
      let reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (this.receptAddtess.receiptName === '') {
        this.$vux.toast.text('收货人不能为空', 'middle')
        return
      } else if (this.receptAddtess.receiptPhone === '') {
        this.$vux.toast.text('电话号码不能为空', 'middle')
        return
      } else if (!reg.test(this.receptAddtess.receiptPhone)) {
        this.$vux.toast.text('电话号码格式不正确', 'middle')
        return
      } else if (this.receptAddtess.receiptProvince === '') {
        this.$vux.toast.text('所属地区不能为空', 'middle')
        return
      } else if (this.receptAddtess.detailAddress === '') {
        this.$vux.toast.text('详细地址不能为空', 'middle')
        return
      }
      this.receptAddtess.id = this.$route.params.addressId
      this.receptAddtess.userId = localUser.get('id')
      axios.put(this, '/v1/receiptAddress', this.receptAddtess, (data) => {
        this.$vux.toast.text('修改收获地址成功', 'middle')
        this.$router.replace('/user/harvestaddress')
      })
    },
    choseAdd () {
      this.showChose = true
    },
    closeAdd () {
      this.showChose = false
    },
    _filter(add, name, code) {
      let result = []
      for (let i = 0; i < add.length; i++) {
        if (code === add[i].id) {
          result = add[i][name]
        }
      }
      return result
    },
    getProvinceId: function(code, input, index) {
      this.province = code
      this.Province = input
      this.showProvince = false
      this.showCity = true
      this.showDistrict = false
      this.showCityList = this._filter(this.info, 'city', this.province)
      // 点击选择当前
      this.info.map(a => { a.selected = false })
      this.info[index].selected = true
      this.receptAddtess.receiptProvince = input
    },
    provinceSelected: function() {
      // 清除市级和区级列表
      this.showCityList = false
      this.showDistrictList = false
      // 清除市级和区级选项
      this.City = false
      this.District = false
      // 选项页面的切换
      this.showProvince = true
      this.showCity = false
      this.showDistrict = false
    },
    getCityId: function(code, input, index) {
      this.city = code
      this.City = input
      this.showProvince = false
      this.showCity = false
      this.showDistrict = true
      this.showDistrictList = this._filter(this.showCityList, 'district', this.city)
      // 选择当前添加active
      this.showCityList.map(a => { a.selected = false })
      this.showCityList[index].selected = true
      this.receptAddtess.receiptCity = input
    },
    citySelected: function() {
      this.showProvince = false
      this.showCity = true
      this.showDistrict = false
    },
    getDistrictId: function(code, input, index) {
      this.district = code
      this.District = input
      // 选择当前添加active
      this.showDistrictList.map(a => { a.selected = false })
      this.showDistrictList[index].selected = true
      // 选取市区选项之后关闭弹层
      this.showChose = false
      this.receptAddtess.receiptArea = input
    },
    districtSelected: function() {
      this.showProvince = false
      this.showCity = false
      this.showDistrict = true
    },
    // 返回事件的处理
    handleNativeBack () {
      let isUpdate = false
      for (const key in this.receptAddtess) {
        if (!this.receptAddtessCopy.hasOwnProperty(key)) {
          isUpdate = true
          break
        }
        if (this.receptAddtessCopy[key] !== this.receptAddtess[key]) {
          isUpdate = true
          break
        }
      }
      const _self = this
      if (isUpdate) {
        _self.$vux.confirm.show({
          title: '温馨提示',
          content: '是否放弃修改收货地址',
          onConfirm () {
            _self.$router.go(-1)
          }
        })
      } else {
        _self.$router.go(-1)
      }
      return true
    }
  },
  components: {
    VHeader,
    XInput,
    Group,
    Cell,
    XTextarea,
    axios,
    localUser
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.modifyAddress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;
  height:100%;
}

.inputWrapper {
    background-color white

}

.myAddress .cont{
  border-bottom: 1px solid rgba(245,245,245,0.8);
}
.myAddress .cont span{
  display: inline-block;
  font-size: 0.28rem;
  color: #333;
  line-height: 0.88rem;
  margin-left: 0.32rem;
}
.myAddress .cont section{
  float:left;
}
.myAddress .cont p{
  display: inline-block;
  font-size: 0.28rem;
  color: #333333;
  line-height: 0.88rem;
  margin-left: 1rem;
}
.myAddress .cont .pic2{
  float: right;
  width: 0.14rem;
  height: 0.24rem;
  margin: 0.32rem 0.32rem 0.32rem 0;
}
.myAddress .cont p.text{
  margin-left: 0.72rem;
}
.showChose{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:120;
  background:rgba(77,82,113,0.8);
}
.address{
  .titleTop {
      display inline
      text-align center
      .titleTopLeft {
          padding-top 5px
          padding-bottom 5px
          span {
            font-size 18px
          }
      }
      .titleTopRight {
          span {
              position absolute
              right 10px
              top -5px
              font-size 30px
              color: #929292
          }
      }
  }
  position:absolute;
  bottom:0;
  left:0;
  z-index:121;
  background:#fff;
  width:100%;
  height: 430px
}

.title {
    padding-top 4px
    padding-bottom 5px
}
.title h4{
  display:inline-block;
  font-size:18px;
  font-weight:normal;
}
.area{
  display:inline-block;
  font-size:15px;
  margin-left:25px;
}
.addList{
  width:85%;
  padding-left:0.32rem;
  font-size:15px;
  line-height:32px;
}
/* 修改的格式 */
.address ul{
  width:95%;
  height:78%;
  overflow:auto;
}
.address ul li{
  margin-left:20px;
}
.address .title .active{
  color:red;
  border-bottom:0.02rem solid red;
}
.address ul .active{
  color:red;
}
</style>

<style>
.modifyAddress .require .vux-label:before {
      content: '*';
      display: inline-block;
      color: red;
  }
</style>

